import Taro, { Component } from '@tarojs/taro';
import { View } from '@doctorwork/components';
import { connect } from '@tarojs/redux';
import { MovableArea, MovableView } from '@tarojs/components';
import GoodsInfo from '../../../../../pages/myCollect/components/GoodsInfo/index'
import './index.styl';
@connect(({ collect }) => ({
    ...collect
}))
export default class DeletePonent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            startX: 0
        };
    }

    handleMovableChange = (index, e) => {
        if (e.detail.source === 'friction') {
            if (e.detail.x < -30) {
                this.showDeleteButton(index);
            } else {
                this.hideDeleteButton(index);
            }
        } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
            this.hideDeleteButton(index);
        }
    };

    handleTouchend = (index, e) => {
        if (
            e.changedTouches[0].pageX < this.state.startX &&
            e.changedTouches[0].pageX - this.state.startX <= -30
        ) {
            this.showDeleteButton(index);
        } else if (
            e.changedTouches[0].pageX > this.state.startX &&
            e.changedTouches[0].pageX - this.state.startX < 10
        ) {
            this.showDeleteButton(index);
        } else {
            this.hideDeleteButton(index);
        }
    };

    handleTouchstart = e => {
        this.state.startX = e.touches[0].pageX;
    };

    showDeleteButton = index => {
        this.props.list.map((item, i) => {
            this.hideDeleteButton(i);
        });
        if (this.props.list[index].moveX == -68) {
            this.setXmove(index, -68.01);
        } else {
            this.setXmove(index, -68);
        }
    };

    hideDeleteButton = index => {
        if (this.props.list[index].moveX == 0) {
            this.setXmove(index, 0.01);
        } else {
            this.setXmove(index, 0);
        }
    };

    setXmove = (index, xmove) => {
        let productList = this.props.list;
        if (index >= productList.length) {
            return;
        }

        let ss = JSON.parse(JSON.stringify(productList));
        ss.map((item, i) => {
            if (i == index) {
                item.moveX = xmove;
            }
            return { ...item };
        });
        this.props.dispatch({
            type: 'collect/save',
            payload: {
                list: ss
            }
        });
    };

    deleteItem = (skuCode, e) => {
        e.stopPropagation();
        const that = this;
        Taro.showModal({
            title: '提示',
            content: '您确定删除该条数据?'
        }).then(res => {
            if (res.confirm) {
                that.props.dispatch({
                    type: 'collect/deleteCollect',
                    payload: {
                        favorIds: [skuCode],
                        favorType: 3
                    }
                });
            }
        });
    };

    toGoodsDetail = item => {
        if (item.moveX < 0) {
            return;
        }
        let jumpType = 'group';
        if (item.productType == 7) {
            jumpType = 'discount';
        } else if (item.productType == 5) {
            jumpType = 'seckill';
        }
        console.log('进入详情页：',item);
        Taro.navigateTo({
            url: `/pages/productDetail/index?skuCode=${
                item.skuCode
            }`
        });
    };

    render() {
        const productList = this.props.list;

        return (
            <View className='main'>
                {productList.map((item, index) => {
                    return (
                        <View className='main-item' key={index}>
                            <MovableArea>
                                <MovableView
                                    damping='200'
                                    outOfBounds='true'
                                    inertia='true'
                                    direction='horizontal'
                                    x={item.moveX}
                                    onChange={this.handleMovableChange.bind(
                                        this,
                                        index
                                    )}
                                    onTouchstart={this.handleTouchstart.bind(
                                        this
                                    )}
                                    onTouchend={this.handleTouchend.bind(
                                        this,
                                        index
                                    )}
                                >
                                    <GoodsInfo
                                        item={item}
                                        favorIdList={this.props.favorIdList}
                                        onClick={this.toGoodsDetail.bind(this)}
                                    />
                                </MovableView>
                            </MovableArea>
                            <View
                                className='main-btn'
                                onClick={this.deleteItem.bind(
                                    this,
                                    item.skuCode
                                )}
                            >
                                删除
                            </View>
                        </View>
                    );
                })}
            </View>
        );
    }
}
